import React from 'react';
import {Checkbox, Icon} from 'antd';
import  style from './index.less';
import classnames from 'classnames';


export default function (props) {
    const [visible = 0, setVisible] = React.useState(0);
    const star = props.star ? {
        style: {
            color:"#FAAD15",
            transform: "scale(1.2)",
        },
    } : {
        style: {
            transform: "scale(1)",
        }
    } 
    return (
        <div>
            <div className={classnames(style.row, props.hoverable && style.hoverable)} >
                <Checkbox style={{width: 50, textAlign: 'center'}} />
                {
                    props.row ? props.row :
                    <div style={{width: '100%',display: 'flex'}} onClick={() => {props.onClick && props.onClick()}}>
                        <span style={{display:'inline-block',textAlign: "center", width: 50}}  onClick = {(e) => { e.stopPropagation(); props.onStar()}}>
                            <Icon type = "star" {...star} theme = {props.star? "filled":"outlined"}  className={style.icon}/>
                        </span>
                        <span style={{width: 100}}>{props.title}</span>
                        <span  style={{flex: 1, width: '100%', display: 'inline-block', overflow: "hidden",textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{props.desc}</span> 
                        <span style={{width: 100, textAlign:'right', padding: "0 5px"}}>{props.date}</span>
                    </div>
                }
            </div>
            {
                !props.row 
                    && 
                    props.collapse 
                        && <div style={{width: "100%", display:  visible ?'block': 'none'}} onClick={() =>{ setVisible(0)}}>
                            {props.collapse}
                        </div>
                            
            }
        </div>
    )
}